<template>
	<view>
		<!-- 展示用户个人信息 -->
		<view class="search-area">
			<!-- 搜索内容 -->
			<view class="search-input">
				<uni-icons class="uni-icon" type="person" size="25"></uni-icons>
				<input class="uni-input" v-model="userData.loginTele" placeholder="个人账号输入" />
			</view>
			<view class="search-button" @click="toLogin(userData.loginTele)"><text>登录</text></view>
		</view>
		<view class="user-info">
			<image class="userPic" :src="store.state.headimgurl" mode="aspectFit"></image>
			<view class="userName">
				{{store.state.nickname}}
			</view>
		</view>
		<!-- 搜索框 搜索想要聊天者 -->
		<view class="search-area">
			<!-- 搜索内容 -->
			<view class="search-input">
				<uni-icons class="uni-icon" type="search" size="25"></uni-icons>
				<input class="uni-input" v-model="userData.searchInfo" placeholder="通过电话号码搜索聊天者" />
			</view>
			<view class="search-button" @click="searchChatter(userData.searchInfo)"><text>搜索</text></view>
		</view>
		<view class="chatter-info">
		 <uni-list v-if="userData.chatterName !=''" :border="true" >
		 	<uni-list-chat :avatar-circle="true" :title="userData.chatterName" :avatar="userData.chatterImg" note="点击即可聊天"   :clickable="true"  @click="toChatRoom"></uni-list-chat>
		 </uni-list>	
		</view>
	</view>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { getUserInfoByTele } from "../../api/user/user";
import store from "../../store";
import chatStore from "../../store/chat";
import { InitSender } from "../../type/chat";
import { userInfoByBack } from "../../type/user";
const userData = reactive({
	searchInfo: '',
	loginTele:'',
	chatterName:'',
	chatterImg:'',
	chatterId:''
});
//登录
const toLogin=(telephone:string)=>{
  store.userLogin(telephone);
  userData.loginTele='';
};
//通过电话查询聊天者
const searchChatter=(telephone:string)=>{
	getUserInfoByTele(telephone).then((res:userInfoByBack)=>{
		userData.chatterId=res.pkId;
		userData.chatterImg=res.userImg;
		userData.chatterName=res.username;
		userData.searchInfo='';
	})
};
const toChatRoom=()=>{
	//聊天者添加入缓存中
	if(!chatStore.isExistSender(userData.chatterId)){
		var chatter=new InitSender();
		chatter.senderId=userData.chatterId;
		chatter.senderImg=userData.chatterImg;
		chatter.senderName=userData.chatterName;
		chatStore.addSender(chatter);
	}
	  uni.navigateTo({
		  url:'/pages/chatRoom/chatRoom?chatterId='+userData.chatterId+'&chatterName='+ userData.chatterName+'&chatterImg='+userData.chatterImg
	  })	
	}
</script>

<style lang="scss">	
.search-area {
	display: flex;
	justify-content: center;
	height: 60rpx;
	padding-top: 1vh;
	.search-input {
		display: flex;
		align-items: center;
		width: 80vw;
		height: 5vh;
		background-color: #f3f3f3;
		margin-right: 4vw;
		border-radius: 15rpx;
		box-shadow: rgba(0, 0, 0, 0.05) 0rpx 6rpx 24rpx 0rpx, rgba(0, 0, 0, 0.08) 0rpx 0rpx 0rpx 1rpx;
		.uni-icon {
			margin-left: 10rpx;
			margin-right: 10rpx;
		}
		.uni-input {
			height: 100%;
			width: 92%;
		}
	}
	.search-button {
		font-size: 40rpx;
		font-weight: bold;
		line-height: 5vh;
		color: #94bcff;
	}
}
.user-info {
	padding-top: 30%;
}

.user-info .userPic {
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	width: 300rpx;
	height: 300rpx;
}
.userName {
	margin-top: 2rem;
	margin-bottom: 2rem;
    line-height: 2rem;
	text-align: center;
	color: lightskyblue;
	font-size: 2rem;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.chatter-info {
	margin-top: 50rpx;
}
</style>
